<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-10 16:53:17
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-12-12 19:45:59
 * @Description: 登录页面
 * @FilePath: \tuanfeng-admin-front\src\pages\Log.vue
-->
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import { useRoleStore } from "../store/role";

const router = useRouter();
const roleStore = useRoleStore();

const name = ref("");
const password = ref("");
const loading = ref(false);

const Login = async () => {
    loading.value = true;

    roleStore
        .Login(name.value, password.value)
        .then((res) => {
            ElNotification({
                title: "登录成功",
                type: "success",
                duration: 2000,
            });
            setTimeout(() => {
                router.push("/window");
            }, 1000);
        })
        .catch((err) => {
            console.log(err);
            loading.value = false;
        });
    return false;
};
</script>
<template>
    <div class="log-container">
        <img class="logo" src="../assets/img/logo.png" alt />
        <div class="title">团风政务服务管理后台</div>
        <el-card class="log-card">
            <div class="item">
                <div class="label">账号：</div>
                <div class="value">
                    <el-input style="width: 300px" v-model="name" placeholder="请输入账号" @keypress.enter="Login"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="label">密码：</div>
                <div class="value">
                    <el-input style="width: 300px" v-model="password" type="password" placeholder="请输入密码" @keypress.enter="Login"></el-input>
                </div>
            </div>
            <el-button :loading="loading" class="log-btn" type="primary" @click="Login">登录</el-button>
        </el-card>
    </div>
</template>
<style scoped lang="less">
.log-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    // background-image: url("../assets/img/bg.png");
    // background-repeat: no-repeat;
    // background-size: cover;
    // background-position: center;
    .logo {
        width: 100px;
        margin-bottom: 15px;
        margin-top: 50px;
    }
    .title {
        font-size: 30px;
        margin-bottom: 30px;
        font-weight: bold;
    }
    .log-card {
        .item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            .label {
                flex: none;
            }
            .value {
            }
        }
        .log-btn {
            width: 100%;
            margin: 10px 0;
        }
    }
}
</style>